<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
    <meta name="renderer" content="webkit"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-transform"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <title>简历列表</title>
    <!--css-->
    <link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/static/css/all.css}">
    <link rel="stylesheet" th:href="@{/static/css/bootstrap-table.min.css}">

<body>
<div class="panel panel-default">
    <div class="panel-body">

        <!-- 工具栏-->
        <div id="toolbar" class="btn-group">
            <button id="btn_save" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>新增
            </button>
        </div>

        <table  id="table" data-height="400"
               data-classes="table table-hover" data-striped="true"
               data-pagination="false" data-side-pagination="client"
               data-show-refresh="false"
               data-toolbar="#toolbar">

        </table>
    </div>
</div>

<!-- 编辑用户模态框（Modal） -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">修改用户简历信息</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">

                        <input type="hidden" name="resumeId" id="resumeId">
                        <label>姓名</label> <input type="text" class="form-control"
                                                 id="updateName">
                    </div>
                    <div class="form-group">
                        <label>手机号</label> <input type="text" class="form-control"
                                                 id="updatePhone">
                    </div>
                    <div class="form-group">
                        <label>地址</label> <input type="text" class="form-control"
                                                 id="updateAddress">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id="updateConfirmBtn">提交更改</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- 添加用户模态框（Modal） -->
<div class="modal fade" id="saveModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">添加用户简历信息</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label>姓名</label> <input type="text" class="form-control"
                                                 id="saveName">
                    </div>
                    <div class="form-group">
                        <label>手机号</label> <input type="text" class="form-control"
                                                 id="savePhone">
                    </div>
                    <div class="form-group">
                        <label>地址</label> <input type="text" class="form-control"
                                                 id="saveAddress">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id="saveConfirmBtn">提交更改</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</body>
    <script th:src="@{/static/js/jquery-2.2.3.min.js}"></script>
    <script th:src="@{/static/js/bootstrap.js}"></script>
    <script th:src="@{/static/js/bootstrap-table.min.js}"></script>

<script type="text/javascript" th:inline="javascript">

    $(document).ready(function() {
        $("#updateModal").modal('hide');
        $("#saveModel").modal('hide');
    });

    function del(id) {

        /*<![CDATA[*/
        var ctxPath =/*[[@{/}]]*/;
        /*]]>*/
        if (confirm("是否删除?")) {
            $.ajax({
                url : ctxPath+"/resume/"+id,
                method:'DELETE',
                success : function(data) {
                    if(data.code==200){
                        alert("删除成功!");
                        //重新加载表格
                        $("#table").bootstrapTable("refresh");
                    }else{
                        alert(data.msg);

                    }


                }
            });
        } else {
        }
    }

    function edit(id) {
        /*<![CDATA[*/
        var ctxPath =/*[[@{/}]]*/;
        /*]]>*/
       $("#updateModal").modal('show');
        idGlobal = id;
        //清楚输入框信息
        $("#updateName").val("");
        $("#updatePhone").val("");
        $("#updateAddress").val("");
        //初始化用户信息
        $.ajax({
            url : ctxPath+'/resume/'+id,
            type: "GET",//方法类型
            success : function(result) {
                if(result.code==200){
                    var data=result.data;
                    $("#updateName").val(data.name);
                    $("#updatePhone").val(data.phone);
                    $("#updateAddress").val(data.address);
                    $("#resumeId").val(data.id); 
                }

            }
        });
    }

    //编辑模态框下确认按钮的点击事件
    $("#updateConfirmBtn").click(function() {

        /*<![CDATA[*/
        var ctxPath =/*[[@{/}]]*/;
        /*]]>*/
        $("#updateModal").modal('hide');

        $.ajax({
          type: "PUT",//方法类型
          contentType: "application/json", //默认值为表单提交
          dataType: "json",//预期服务器返回的数据类型
          url: ctxPath+"/resume" ,//url
          data: JSON.stringify({
            id:$("#resumeId").val(),
            name : $("#updateName").val(),
            phone : $("#updatePhone").val(),
            address : $("#updateAddress").val()
        }),

            success : function() {
                alert("修改成功！");
                //重新加载表格
                $("#table").bootstrapTable("refresh");
            }
        });
    });

    //添加按钮点击事件
    $("#btn_save").click(function() {
        //借用修改的模态框
        $("#saveModal").modal('show');
        //清楚输入框信息
        $("#saveName").val("");
        $("#savePhone").val("");
        $("#saveAddress").val("");
    });

    //添加用户模态框下的确认按钮点击事件
    $("#saveConfirmBtn").click(function() {

        /*<![CDATA[*/
        var ctxPath =/*[[@{/}]]*/;
        /*]]>*/
        $.ajax({
                //几个参数需要注意一下
            type: "POST",//方法类型
            contentType: "application/json", //默认值为表单提交
            dataType: "json",//预期服务器返回的数据类型
            url: ctxPath+"/resume" ,//url
            data: JSON.stringify({
                name : $("#saveName").val(),
                phone : $("#savePhone").val(),
                address : $("#saveAddress").val()
            }),
            success : function(data) {
                $("#saveModal").modal('hide');
                alert("添加成功!");
                //重新加载表格
                $("#table").bootstrapTable("refresh");
            },
            error:function (data) {
                $("#saveModal").modal('hide');
                alert(data.msg)

            }
        });
    });

    /*<![CDATA[*/
    var ctxPath =/*[[@{/}]]*/;
    $("#table").bootstrapTable(

    /*]]>*/

            {
                url : ctxPath+"/resume/list",
                dataType : "json",
                contentType : "application/x-www-form-urlencoded;charset=utf-8",
                method : 'get',
                dataField : "data",
                responseHandler : function(res) {
                    //在ajax获取到数据，渲染表格之前，修改数据源
                    return res;
                },
                columns : [
                    {
                        field : '',
                        title: '序号',
                        formatter: function (value, row, index) {
                            return index+1;
                        }

                    },
                    {
                        field : 'name',
                        title : '名字',
                        align : 'center'
                    },
                    {
                        field : 'address',
                        title : '地址',
                        align : 'center'
                    },
                    {
                        field : 'phone',
                        title : '手机号',
                        align : 'center'
                    },
                    {
                        title : '操作',
                        field : 'id',
                        align : 'center',
                        formatter : function(value, row, index) {
                             var e = '<a href="javascript:void(0);" onclick="edit(\''
                                 + row.id + '\')" >编辑</a> ';
                            var d = '<a href="javascript:void(0);" onclick="del(\''
                                + row.id + '\')" >删除</a> ';
                            return e+d;
                        }

                    } ]
            });
   </script>
</head>
<body>

</body>
</html>
